<template>
	<div class="cost-item-container">
		<div class="page-header">
			<h2>客户管理</h2>
		</div>

		<!-- 搜索筛选区域 -->
		<div class="search-container">
			<el-form :inline="true" :model="searchForm" class="search-form">
				<el-form-item label="客户用电编码">
					<el-input
						style="width: 200px"
						v-model="searchForm.customerCode"
						placeholder="请输入客户用电编码"
						clearable
					></el-input>
				</el-form-item>

				<el-form-item label="客户名称">
					<el-input
						style="width: 200px"
						v-model="searchForm.customerName"
						placeholder="请输入客户名称"
						clearable
					></el-input>
				</el-form-item>

				<el-form-item label="客户类型">
					<el-select
						style="width: 120px"
						v-model="searchForm.customerType"
						placeholder="请选择客户类型"
						clearable
					>
						<el-option
							v-for="type in customerTypes"
							:key="type.value"
							:label="type.label"
							:value="type.value"
						></el-option>
					</el-select>
				</el-form-item>

				<el-form-item label="状态">
					<el-select
						style="width: 120px"
						v-model="searchForm.status"
						placeholder="请选择状态"
						clearable
					>
						<el-option label="正常" :value="0"></el-option>
						<el-option label="停用" :value="1"></el-option>
						<el-option label="欠费" :value="2"></el-option>
					</el-select>
				</el-form-item>

				<el-form-item>
					<el-button type="primary" @click="handleSearch">搜索</el-button>
					<el-button @click="handleReset">重置</el-button>
				</el-form-item>
			</el-form>
		</div>

		<!-- 数据操作区域 -->
		<div class="action-container">
			<el-button type="primary" @click="handleAdd">
				<el-icon><Plus /></el-icon>
				<span>新增客户</span>
			</el-button>
		</div>

		<!-- 列表展示区域 -->
		<div class="table-container">
			<el-table v-loading="loading" :data="customerList" style="width: 100%">
				<el-table-column prop="id" label="ID" width="80"></el-table-column>
				<el-table-column
					prop="customerCode"
					label="客户用电编码"
					width="120"
				></el-table-column>
				<el-table-column
					prop="customerName"
					label="客户名称"
					width="180"
				></el-table-column>
				<el-table-column prop="customerType" label="客户类型" width="100">
							<template #default="{ row }">
								{{ formatType(row.customerType) }}
							</template>
						</el-table-column>
						<el-table-column prop="contractCapacity" label="合同容量" width="100">
						</el-table-column>
						<el-table-column prop="zoneName" label="所属区域" width="120">
						</el-table-column>
						<el-table-column prop="phone" label="联系电话" width="120">
						</el-table-column>
						<el-table-column prop="status" label="状态" width="80">
					<template #default="{ row }">
						<el-tag
							:type="
								row.status === 0
									? 'success'
									: row.status === 1
									? 'warning'
									: 'danger'
							"
							>{{ formatStatus(row.status) }}</el-tag
						>
					</template>
				</el-table-column>

				<el-table-column label="操作" fixed="right">
					<template #default="{ row }">
						<el-button size="small" @click="handleView(row)">查看</el-button>
						<el-button size="small" type="primary" @click="handleEdit(row)"
							>编辑</el-button
						>
						<el-button size="small" type="danger" @click="handleDelete(row.id)"
							>删除</el-button
						>
					</template>
				</el-table-column>
			</el-table>
		</div>
		<!-- 分页组件 -->
		<div class="pagination-container">
			<el-pagination
				v-model:current-page="pagination.currentPage"
				v-model:page-size="pagination.pageSize"
				:page-sizes="[2, 10, 20, 50, 100]"
				layout="total, sizes, prev, pager, next, jumper"
				:total="pagination.total"
				@size-change="handleSizeChange"
				@current-change="handleCurrentChange"
			></el-pagination>
		</div>

		<!-- 查看详情对话框 -->
		<el-dialog
			v-model="viewDialogVisible"
			title="查看客户详情"
			width="600px"
			:close-on-click-modal="false"
		>
			<el-descriptions :column="1" border>
				<el-descriptions-item label="ID">
					{{ viewForm.id }}
				</el-descriptions-item>
				<el-descriptions-item label="客户用电编码">
					{{ viewForm.customerCode }}
				</el-descriptions-item>
				<el-descriptions-item label="客户名称">
					{{ viewForm.customerName }}
				</el-descriptions-item>
				<el-descriptions-item label="客户类型">
					{{ formatType(viewForm.customerType) }}
				</el-descriptions-item>
				<el-descriptions-item label="合同容量">
					{{ viewForm.contractCapacity }}
				</el-descriptions-item>
				<el-descriptions-item label="所属区域">
					{{ viewForm.zoneName || '-' }}
				</el-descriptions-item>
				<el-descriptions-item label="联系电话">
					{{ viewForm.phone || '-' }}
				</el-descriptions-item>
				<el-descriptions-item label="用电地址">
					{{ viewForm.address || '-' }}
				</el-descriptions-item>
				<el-descriptions-item label="状态">
					<el-tag
						:type="
							viewForm.status === 0
								? 'success'
								: viewForm.status === 1
								? 'warning'
								: 'danger'
						"
						>{{ formatStatus(viewForm.status) }}</el-tag
					>
				</el-descriptions-item>
			</el-descriptions>
		</el-dialog>

		<!-- 编辑对话框 -->
		<el-dialog
			v-model="editDialogVisible"
			title="编辑客户"
			width="600px"
			:close-on-click-modal="false"
		>
			<el-form :model="editForm" label-width="120px">
				<el-form-item label="客户用电编码" prop="customerCode" required>
					<el-input
						v-model="editForm.customerCode"
						placeholder="请输入客户用电编码"
						maxlength="50"
					></el-input>
				</el-form-item>

				<el-form-item label="客户名称" prop="customerName" required>
					<el-input
						v-model="editForm.customerName"
						placeholder="请输入客户名称"
						maxlength="100"
					></el-input>
				</el-form-item>

				<el-form-item label="客户类型" prop="customerType" required>
				<el-select
					v-model="editForm.customerType"
					placeholder="请选择客户类型"
				>
					<el-option
						v-for="type in customerTypes"
						:key="type.value"
						:label="type.label"
						:value="type.value"
					></el-option>
				</el-select>
			</el-form-item>

			<el-form-item label="联系电话" prop="phone">
				<el-input
					v-model="editForm.phone"
					placeholder="请输入联系电话"
					maxlength="20"
				></el-input>
			</el-form-item>

			<el-form-item label="用电地址" prop="address">
				<el-input
					v-model="editForm.address"
					placeholder="请输入用电地址"
					maxlength="200"
				></el-input>
			</el-form-item>

			<el-form-item label="合同容量" prop="contractCapacity" required>
				<el-input-number
					v-model="editForm.contractCapacity"
					placeholder="请输入合同容量"
					:min="0"
					:step="1"
					style="width: 100%"
				></el-input-number>
			</el-form-item>

				<el-form-item label="状态" prop="status" required>
					<el-radio-group v-model="editForm.status">
						<el-radio :label="0">正常</el-radio>
						<el-radio :label="1">停用</el-radio>
						<el-radio :label="2">欠费</el-radio>
					</el-radio-group>
				</el-form-item>
			</el-form>

			<template #footer>
				<el-button @click="editDialogVisible = false">取消</el-button>
				<el-button type="primary" @click="saveEdit" :loading="editLoading"
					>保存</el-button
				>
			</template>
		</el-dialog>

		<!-- 新增对话框 -->
		<el-dialog
			v-model="addDialogVisible"
			title="新增客户"
			width="600px"
			:close-on-click-modal="false"
		>
			<el-form :model="addForm" label-width="120px">
				<el-form-item label="客户用电编码" prop="customerCode" required>
					<el-input
						v-model="addForm.customerCode"
						placeholder="请输入客户用电编码"
						maxlength="50"
					></el-input>
				</el-form-item>

				<el-form-item label="客户名称" prop="customerName" required>
					<el-input
						v-model="addForm.customerName"
						placeholder="请输入客户名称"
						maxlength="100"
					></el-input>
				</el-form-item>

				<el-form-item label="客户类型" prop="customerType" required>
				<el-select
					v-model="addForm.customerType"
					placeholder="请选择客户类型"
				>
					<el-option
						v-for="type in customerTypes"
						:key="type.value"
						:label="type.label"
						:value="type.value"
					></el-option>
				</el-select>
			</el-form-item>

			<el-form-item label="联系电话" prop="phone">
				<el-input
					v-model="addForm.phone"
					placeholder="请输入联系电话"
					maxlength="20"
				></el-input>
			</el-form-item>

			<el-form-item label="用电地址" prop="address">
				<el-input
					v-model="addForm.address"
					placeholder="请输入用电地址"
					maxlength="200"
				></el-input>
			</el-form-item>

			<el-form-item label="合同容量" prop="contractCapacity" required>
						<el-input-number
							v-model="addForm.contractCapacity"
							placeholder="请输入合同容量"
							:min="0"
							:step="1"
							style="width: 100%"
						></el-input-number>
					</el-form-item>

					<el-form-item label="所属区域" prop="powerZoneId">
						<el-select
							v-model="addForm.powerZoneId"
							placeholder="请选择所属区域"
							clearable
						>
							<el-option
								v-for="zone in powerZoneOptions"
								:key="zone.value"
								:label="zone.label"
								:value="zone.value"
							></el-option>
						</el-select>
					</el-form-item>

					<el-form-item label="状态" prop="status" required>
					<el-radio-group v-model="addForm.status">
						<el-radio :label="0">正常</el-radio>
						<el-radio :label="1">停用</el-radio>
						<el-radio :label="2">欠费</el-radio>
					</el-radio-group>
				</el-form-item>
			</el-form>

			<template #footer>
				<el-button @click="addDialogVisible = false">取消</el-button>
				<el-button type="primary" @click="saveAdd" :loading="addLoading"
					>保存</el-button
				>
			</template>
		</el-dialog>
	</div>
</template>
<script setup>
import { onMounted } from "vue";
import { Plus } from "@element-plus/icons-vue";
import { useCustomer } from "../hooks/useCustomer";
const {
	loading,
	// 客户列表
	customerList,
	LoadingCustomerList,
	// 查看客户详情
	viewDialogVisible,
	viewForm,
	handleView,
	// 删除客户
	handleDelete,
	// 编辑客户
	editDialogVisible,
	editForm,
	saveEdit,
	handleEdit,
	customerTypes,
	editLoading,
	// 搜索表单
	searchForm,
	// 搜索
	handleSearch,
	// 重置搜索
	handleReset,
	// 分页信息
	pagination,
	// 分页切换
	handleCurrentChange,
	handleSizeChange,

	// 新增客户
	addDialogVisible,
	addForm,
	handleAdd,
	addLoading,
	saveAdd,
	// 区域选项
	powerZoneOptions,
	// 格式化方法
	formatType,
	formatStatus,
} = useCustomer();
onMounted(() => {
	LoadingCustomerList();
});
</script>

<style scoped>
.cost-item-container {
	padding: 20px;
	background-color: #fff;
	min-height: calc(100vh - 40px);
}

.page-header {
	margin-bottom: 20px;
}

.page-header h2 {
	margin: 0;
	font-size: 24px;
	font-weight: 500;
	color: #303133;
}

.search-container {
	background-color: #f5f7fa;
	padding: 16px;
	margin-bottom: 20px;
	border-radius: 4px;
}

.search-form {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 16px;
}

.action-container {
	margin-bottom: 20px;
	display: flex;
	justify-content: flex-end;
}

.table-container {
	margin-bottom: 20px;
}

.pagination-container {
	display: flex;
	justify-content: flex-end;
}

/* 响应式调整 */
@media (max-width: 768px) {
	.cost-item-container {
		padding: 10px;
	}

	.search-form {
		flex-direction: column;
		align-items: stretch;
	}

	.search-form .el-form-item {
		margin-right: 0;
	}

	.el-table {
		font-size: 12px;
	}

	.el-table-column--selection {
		width: 40px !important;
	}

	.el-table .el-button {
		padding: 4px 8px;
		font-size: 12px;
	}
}
</style>
